<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>ArcGIS JS 实现仿百度地图的距离量测和面积量测 </title>
    <link rel="stylesheet" href="http://127.0.0.1:8081/arcgis_js_api/library/3.19/3.19/esri/css/esri.css">
    <style>
        html, body, #map {
            height: 100%;
            width: 100%;
            margin: 0px;
            padding: 0px;
        }

        #measureTools {
            position: absolute;
            top: 0px;
            left: 0px;
            z-index: 99;
        }

        #coordinateDiv {
            position: absolute;
            bottom: 10px;
            left: 10px;
            z-index: 99;
            color: red;
            font-size: 25px;
            font-family: Arial, Helvetica, sans-serif;
        }
    </style>
    <script type="text/javascript">
        var dojoConfig = {
            async: true,
            packages: [{
                "name": "layerjs",
                "location": "/ArcgisMap/static/js/arcgis/measure"
                //"location": location.pathname.replace(/\/[^/]+$/, "")+ "/custom"
            }]
        };
    </script>
    <script src="http://127.0.0.1:8081/arcgis_js_api/library/3.19/3.19/init.js"></script>
    <script type="text/javascript">
        require([
            "esri/map",
            "esri/layers/ArcGISTiledMapServiceLayer",
            "layerjs/MeasureTools",
            "layerjs/tiandituVecLayer",
            "layerjs/tiandituAnnoLayer",
            "dojo/dom",
            "dojo/domReady!"
        ], function (Map, ArcGISTiledMapServiceLayer, deMeasureTools, TiandituVecLayer, TiandituAnnoLayer, dom) {

            var tileLayer = new ArcGISTiledMapServiceLayer("http://cache1.arcgisonline.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer");
            var map = new Map("map", {
                center: [118.78881634541742, 32.087441374512395],
                zoom: 10
            });
            map.addLayer(tileLayer);

//            var map = new Map("map", {
//                showAttribution: false,
//                fadeOnZoom: true,
//                force3DTransforms: true,
//                center: [101.7, 24.6],
//                zoom: 10,
//                autoResize: true,
//                sliderPosition: "bottom-right",
//                logo: false
//            });
//            var veclayer = new TiandituVecLayer();
//            map.addLayer(veclayer);
//            var annolayer = new TiandituAnnoLayer();
//            map.addLayer(annolayer);
            var measureTool = new deMeasureTools({
                map: map
            }, "measureTools");

            map.on("click", mapClick);

            //地图点击事件
            function mapClick(evt) {
//               var mp = webMercatorUtils.webMercatorToGeographic(evt.mapPoint);
                var mp = evt.mapPoint;
                dom.byId('coordinateDiv').innerHTML = mp.x + ',' + mp.y;
            }
        });
    </script>
</head>

<body>
<div id="map">
    <div id="measureTools">
        <button class="measure-distance">距离</button>
        <button class="measure-area">面积</button>
    </div>
    <div id="coordinateDiv"></div>
</div>
</body>
</html>
